<template>
	<el-container>
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="search.status" @tab-change="tabChange">
				<el-tab-pane label="全部" name=""></el-tab-pane>
				<el-tab-pane label="未受理" name="0"></el-tab-pane>
				<el-tab-pane label="未回复" name="1"></el-tab-pane>
				<el-tab-pane label="已回复" name="2"></el-tab-pane>
				<el-tab-pane label="已完结" name="3"></el-tab-pane>
			</el-tabs>
		</el-header>
		<el-header>
			<div class="left-panel">
				<div class="right-panel-search">
					<el-select style="width: 150px;" v-model="search.second_type" clearable placeholder="异常类型">
						<el-option 
							v-for="item in typeOptions" 
							:key="item.type" 
							:label="item.name" 
							:value="item.type" 
						/>
					</el-select>
					<el-input style="width: 200px;" v-model="search.keyword" placeholder="订单号/会员ID" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
			<div class="right-panel">
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable2 ref="table" :apiObj="list.apiObj" row-key="id" stripe>
				<el-table-column label="ID" prop="id" width="60"></el-table-column>
				<el-table-column label="会员信息" prop="member_id" width="120">
					<template #default="scope">
						<p>会员ID：{{scope.row.member_id}}</p>
					</template>
				</el-table-column>
				<el-table-column label="订单号" prop="ordernum" width="200"></el-table-column>
				<el-table-column label="异常类型" prop="type" width="120">
					<template #default="scope">
						<el-tag :type="getTypeTagType(scope.row.type)">
							{{getTypeName(scope.row.type)}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="反馈内容" prop="content" width="200" show-overflow-tooltip></el-table-column>
				<el-table-column label="运单号" prop="waybill" width="150">
					<template #default="scope">
						<span v-if="scope.row.waybill">{{scope.row.waybill}}</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column label="重量" prop="tel_weight" width="80">
					<template #default="scope">
						<span v-if="scope.row.tel_weight">{{scope.row.tel_weight}}kg</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column label="修改金额" prop="modity_value" width="100">
					<template #default="scope">
						<span v-if="scope.row.modity_value && scope.row.modity_value !== '0.00'">
							{{scope.row.modity_value}}元
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column label="状态" prop="status" width="100">
					<template #default="scope">
						<el-tag :type="getStatusType(scope.row.status)">
							{{getStatusText(scope.row.status)}}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="create_time" width="150"></el-table-column>
				<el-table-column label="更新时间" prop="update_time" width="150"></el-table-column>
				<el-table-column label="操作" fixed="right" align="right" width="280">
					<template #default="scope">
						<el-button size="small" type="info" @click="table_detail(scope.row)">查看详情</el-button>
						<el-button size="small" v-if="scope.row.status == 0" type="primary" 
							@click="table_handle(scope.row)">受理</el-button>
						<el-button size="small" v-if="scope.row.status == 1" type="warning" 
							@click="table_handle(scope.row)">回复</el-button>
						<el-button size="small" v-if="scope.row.status == 2" type="success" 
							@click="table_handle(scope.row)">完结</el-button>
						<el-button size="small" type="danger" 
							@click="table_close(scope.row)">关闭工单</el-button>
					</template>
				</el-table-column>
			</scTable2>
		</el-main>
	</el-container>
	
	<!-- 异常反馈详情弹窗 -->
	<aftersalesDetail v-if="dialog.detail" ref="detailDialog" @closed="dialog.detail=false" @handle="handleHandleFromDetail"></aftersalesDetail>
	
	<!-- 异常反馈处理弹窗 -->
	<aftersalesHandle v-if="dialog.handle" ref="handleDialog" @success="handleSaveSuccess" @closed="dialog.handle=false"></aftersalesHandle>
</template>

<script>
	import aftersalesHandle from './components/aftersalesHandle.vue'
	import aftersalesDetail from './components/aftersalesDetail.vue'
	
	export default {
		name: 'aftersalesList',
		components: {
			aftersalesHandle,
			aftersalesDetail
		},
		data() {
			return {
				dialog: {
					detail: false,
					handle: false
				},
				search: {
					status: '',
					second_type: '',
					keyword: ''
				},
				typeOptions: [], // 异常类型选项
				list: {
					apiObj: this.$API.aftersales.aftersales.list
				}
			}
		},
		computed: {
		},
		mounted() {
			this.getTypeOptions()
		},
		methods: {
			// 获取异常类型选项
			async getTypeOptions() {
				try {
					const res = await this.$API.aftersales.aftersales.secondType.get()
					if (res.code === 200) {
						this.typeOptions = res.data
						console.log('异常类型数据:', this.typeOptions)
					}
				} catch (error) {
					console.error('获取异常类型失败:', error)
				}
			},
			
			// 获取异常类型名称
			getTypeName(type) {
				let typeItem = this.typeOptions.find(item => item.type == type)
				console.log('异常类型名称:', typeItem, this.typeOptions)
				return typeItem ? typeItem.name : '未知类型'
			},
			
			// 获取异常类型标签类型
			getTypeTagType(type) {
				// 根据异常类型返回不同的标签颜色
				if ([1, 16, 17, 18, 20].includes(type)) {
					return 'info'    // 催取件、催物流、催派送、更改收件信息、核实退回原因
				} else if ([4, 7, 12, 14, 15, 19].includes(type)) {
					return 'warning' // 重量异常、线下收费、签收未收到货、少件、错件、拦截退回
				} else if ([5, 10, 11].includes(type)) {
					return 'danger'  // 虚假揽收、破损、遗失
				} else if (type === 13) {
					return 'info'    // 服务态度差
				} else {
					return 'info'    // 默认
				}
			},
			
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					0: '未受理',
					1: '未回复',
					2: '已回复',
					3: '已完结'
				}
				return statusMap[status] || '未知状态'
			},
			
			// 获取状态标签类型
			getStatusType(status) {
				const statusMap = {
					0: 'danger',   // 未受理
					1: 'warning',  // 未回复
					2: 'info',     // 已回复
					3: 'success'   // 已完结
				}
				return statusMap[status] || 'info'
			},
			
			// 查看详情
			table_detail(row) {
				this.dialog.detail = true
				this.$nextTick(() => {
					this.$refs.detailDialog.open().setData(row)
				})
			},
			
			// 处理异常反馈
			table_handle(row) {
				this.dialog.handle = true
				this.$nextTick(() => {
					this.$refs.handleDialog.open().setData(row)
				})
			},
			
			// 关闭工单
			async table_close(row) {
				try {
					await this.$confirm('确定要关闭此工单吗？关闭后将无法再次处理！', '确认关闭', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					
					// 调用关闭工单接口
					const res = await this.$API.aftersales.aftersales.complete.post({
						id: row.id
					})
					
					if (res.code === 200) {
						this.$message.success('工单已关闭')
						// 刷新表格
						this.$refs.table.refresh()
					} else {
						this.$message.error(res.msg || '关闭失败')
					}
				} catch (error) {
					if (error !== 'cancel') {
						console.error('关闭工单失败:', error)
						this.$message.error('关闭失败')
					}
				}
			},
			
			// 从详情页面跳转到处理
			handleHandleFromDetail(row) {
				this.table_handle(row)
			},
			
			// 标签切换
			tabChange(name) {
				this.search.status = name
				this.$refs.table.reload({
					...this.search
				})
			},
			
			// 搜索
			upsearch() {
				let search = JSON.parse(JSON.stringify(this.search))
				this.$refs.table.upData({
					...search
				})
			},
			
			// 操作成功回调
			handleSaveSuccess(data, mode) {
				console.log(data, mode)
				// 刷新表格
				this.$refs.table.refresh()
			}
		}
	}
</script>

<style>
</style>
